<template>
  <!-- backtop-->
  <span class="cd-top icon-angle-up cd-is-visible"><span class="glyphicon glyphicon-menu-up"></span></span>
</template>

<script setup lang='ts'>
import { ref, reactive, onMounted } from 'vue'
onMounted(() => {
  // 返回顶部
  $(document).ready(function ($) {
    var offset = 0,
      offset_opacity = 1200,
      scroll_top_duration = 200,
      $back_to_top = $('.cd-top')

    $(window).scroll(function () {
      $(this).scrollTop() > offset ? $back_to_top.addClass('cd-is-visible') : $back_to_top.removeClass('cd-is-visible cd-fade-out')
      if ($(this).scrollTop() > offset_opacity) {
        $back_to_top.addClass('cd-fade-out')
      }
    })
    $back_to_top.on('click', function (event) {
      event.preventDefault()
      $('body,html').animate(
        {
          scrollTop: 0
        },
        scroll_top_duration
      )
    })
  })
})
</script>

<style scoped>
</style>